<template>
  <div class="zeroplayer" v-if="$store.state.openplayer" @click.self="nothing">
    <div class="song" v-if="songDetail">
      <!-- 模糊背景  666him没有图片-->
      <div
        class="song_bd"
        :style="{'background':songDetail.al.picUrl?`url(${songDetail.al.picUrl}?param=200y200)`:'rgba(0, 0, 0, 0.7)'}"
      ></div>
      <!-- 关闭音乐按钮 -->
      <div class="close" @click="closePlayer">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="song_box">
        <!-- 音乐名称 -->
        <div class="top_name">
          <p>{{songDetail.name}}</p>
          <span>{{songDetail.ar[0].name}}</span>
        </div>
        <!-- 音乐cd 转盘 -->
        <mt-swipe :auto="0" :continuous="false" @change="handleChange">
          <mt-swipe-item>
            <div class="circle">
              <div
                class="circle_img"
                ref="circle"
                :style="{'animationPlayState':$store.state.audiostate?'running':'paused' }"
              >
                <img
                  :src="songDetail.al.picUrl?`${songDetail.al.picUrl}?param=200y200`:`${require('../assets/base.png')}`"
                  alt
                />
              </div>
            </div>
          </mt-swipe-item>
          <mt-swipe-item>
            <div class="lyric" ref="wrapper">
              <div class="lyric_content">
                <div class="test" v-for="(num) in [,,,,,,]"> &nbsp </div>
                <p
                  :class="$store.state.highline==index?'highline':''"
                  v-for="(item,index) in lyric"
                  :key="index"
                >{{item[1]}}</p>
                <div class="test" v-for="(num2) in [,,,,,,]"> &nbsp </div>
              </div>
            </div>
          </mt-swipe-item>
        </mt-swipe>

        <!-- 进度条 -->
        <div class="linebar">
          <div class="curtime">{{formatSeconds($store.state.currenttime)}}</div>
          <!-- 进度条组件 -->
          <zeroProgress :percent="Percent" @progressChange="progresschange"></zeroProgress>
          <div class="endtime">{{formatSeconds($store.state.duration)}}</div>
        </div>
        <!-- 播放控制器组件 -->
        <zeroPlayControl
          @controlstate="controlstate"
          @next_pre="next_pre"
          @openqueue="openqueue"
          @playmode="playmode"
        ></zeroPlayControl>
      </div>
    </div>
  </div>
</template>


<script>
import zeroProgress from "@/components/ZeroProgress.vue";
import zeroPlayControl from "@/components/ZeroPlayControl.vue";
import BScroll from "better-scroll";
export default {
  name: "zeroplayer",
  data() {
    return {
      id: null,
      // details:null,
      //轮播图参数
      swiperOption: {
        initialSlide: 0,
        spaceBetween: 10, //两图之间的间隔
        pagination: {
          el: ".swiper-pagination"
        }
      }
    };
  },
  methods: {
    nothing() {},
    // 获取进度条改变后的百分比以控制时间
    progresschange(pencent) {
      let curtime = this.$store.state.duration * pencent;
      this.audio.currentTime = curtime;
      if (!this.$store.state.audiostate) {
        this.audio.play();
      }
    },
    // 组件控制播放或暂停
    controlstate() {
      if (!this.$store.state.audiostate) {
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
    // 组件控制上一首或下一首
    next_pre(val) {
      if (val == "next") {
        this.$store.commit("changeIndex", "next");
      }
      if (val == "pre") {
        this.$store.commit("changeIndex", "pre");
      }
      // computed 中的index变了,所以songDetail的id页跟着加减
      this.audio.playSong(this.curplayid);
    },
    //时间格式化方法
    formatSeconds(s) {
      var t = "";
      if (s > -1) {
        // var hour = Math.floor(s/3600);
        var min = Math.floor(s / 60);
        var sec = Math.floor(s % 60);
        // if(hour < 10) {
        //     t = '0'+ hour + ":";
        // } else {
        //     t = hour + ":";
        // }
        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec.toFixed(0);
      }
      return t;
    },
    //关闭播放器
    closePlayer() {
      this.$store.commit("openPlayer", false);
    },
    //打开播放列表
    openqueue() {
      this.$store.commit("openPlayList", true);
    },
    //切换模式
    playmode() {
      this.$store.commit("playMode");
    },
    bsscroll() {
      this.$nextTick(() => {
        //$refs绑定元素
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            //开启点击事件 默认为false
            click: true,
            mouseWheel: true,
            probeType: 3
            // startY: 300
          });
        } else if (!this.$refs.col_wrapper) {
          return;
        } else {
          this.scroll.refresh();
        }
      });
    },
    handleChange() {
      this.bsscroll();
    }
  },
  mounted() {},
  // 根据当前播放时间计算歌曲进度百分比
  computed: {
    Percent() {
      if (this.scroll) {
        this.scroll.scrollToElement(".highline", 500, false, true, "easing");
      }

      return this.$store.state.currenttime / this.$store.state.duration;
    },
    curplayid() {
      let temp = this.$store.getters.playdetails;
      console.log("temp", temp);
      let id = temp.id;
      // this.$store.dispatch("getSongdetails", this.id);
      return id;
    },
    songDetail() {
      return this.$store.state.songinfoDetails;
    },
    lyric() {
      let ly = [];
      // 分割总歌词
      if (this.$store.state.lyric) {
        let temp = this.$store.state.lyric.split(/\[/g);
        temp.forEach((item, index) => {
          let temp_item = item.split("]");
          ly.push(temp_item);
        });
      }
      // 把单句歌词分割成时间和歌词
      ly.forEach((item, index) => {
        let temp = item[0].slice(0, 5);
        if (this.formatSeconds(this.$store.state.currenttime) == temp) {
          this.$store.commit("highline", index);
        }
      });

      return ly;
    }
  },
  components: {
    zeroProgress,
    zeroPlayControl
  }
};
</script>


<style lang='scss'>
$zerocolor: #d43c33;
$fontcolor: #333;
.zeroplayer {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 10;
  // background: rgba(0, 0, 0, 0.9);
  .song {
    position: relative;
    width: 100%;
    height: 100vh;
    .close {
      width: 30px;
      position: fixed;
      top: 15px;
      left: 15px;
      color: #fff;
      i {
        line-height: 30px;
      }
    }
    .song_bd {
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        background-size: cover;
        background-position: center;
        filter: blur(15px) brightness(0.8);
        transform: scale(1.2);
        z-index: -1;
      }
    }
    .song_box {
      width: 100%;
      padding-top: 30px;
      .top_name {
        width: 80%;
        margin: 0 auto;
        color: #fff;
        p {
          font-size: 20px;
          line-height: 28px;
          overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
        }
        span {
          font-size: 10px;
          line-height: 20px;
        }
      }
      .mint-swipe {
        margin-top: 20px;
        width: 100%;
        height: 60vh;
        .mint-swipe-items-wrap {
          height: 100%;
        }
        .mint-swipe-indicators {
          bottom: 0;
        }
      }
      .lyric {
        width: 90%;
        margin: 0 auto;
        height: 100%;
        // background: rgba(0, 0, 0, 0.3);
        overflow: hidden;
        border-radius: 10px;
        line-height: 36px;
        font-size: 18px;
        color: #fff;
        .lyric_content {
          width: 100%;
        }
        .highline {
          font-size: 24px;
          color: #d43c33;
        }
      }
      .circle {
        width: 70vw;
        height: 70vw;
        max-width: 350px;
        max-height: 350px;
        margin: 0 auto;
        margin-top: 8vh;
        position: relative;
        border: 50px solid #363636;
        border-radius: 50%;
        position: relative;

        .circle_img {
          width: 48vw;
          height: 48vw;
          max-width: 280px;
          max-height: 280px;
          border-radius: 100%;
          overflow: hidden;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          animation: rotatepic 20s linear infinite forwards;
          animation-play-state: paused;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .linebar {
        position: absolute;
        bottom: 100px;
        font-size: 12px;
        display: flex;
        justify-content: space-around;
        line-height: 20px;
        color: #fff;
        left: 0;
        right: 0;
      }
      .zeroplaycontrol {
        position: absolute;
        bottom: 20px;
        width: 100%;
      }
    }
  }
}
@keyframes rotatepic {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>